<template>
  <div>
    <top-bar>
      <div slot="right">
        <div class="cancel_text" @click="showCancelDialog">取消订单</div>
      </div>
    </top-bar>
    <div id="waiting_lobby">
      <expansion-panel v-if="fixedOrderInfo">
        <template v-slot:open>
          <div class="column info-panel-open">
            <div class="upper row between">
              <div class="hint">车主通常需要5-15分钟接单，请稍等..</div>
              <div class="add-thank-fee" @click="addThanksFee">添加感谢费</div>
            </div>
            <div class="lower row between">
              <div class="allot-info column">
                <div class="time-info row">
                  <div class="time-string text-ellipsis">{{fixedOrderInfo.timeInfo.text}}</div>
                  <div class="number-info">{{fixedOrderInfo.numberInfo.text}}</div>
                </div>
                <div class="place-info row">
                  <svg fill="#3F88EB" width="12" height="12">
                    <circle cx="6" cy="6" r="3" />
                  </svg>
                  <div
                    class="place-info-string text-ellipsis"
                  >{{fixedOrderInfo.startInfo.cityName}} {{fixedOrderInfo.startInfo.shortName}}</div>
                </div>
                <div class="place-info row">
                  <svg fill="#FF6917" width="12" height="12">
                    <circle cx="6" cy="6" r="3" />
                  </svg>
                  <div
                    class="place-info-string text-ellipsis"
                  >{{fixedOrderInfo.endInfo.cityName}} {{fixedOrderInfo.endInfo.shortName}}</div>
                </div>
              </div>
              <div class="price-info column">
                <div class="row centered">
                  <div class="price-string">
                    <span class="price-symbol">￥</span>
                    {{fixedOrderInfo.payInfo.estimateAmt}}
                  </div>
                  <md-icon name="circle-alert" class="price-desc-icon"></md-icon>
                </div>
                <div class="price-desc">
                  <div>
                    拼成返还最高
                    <span style="color: #FF6917">{{fixedOrderInfo.payInfo.returnHighestAmt}}</span>元
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-slot:close>
          <div class="column info-panel-close">
            <div class="upper row between">
              <div class="hint">车主通常需要5-15分钟接单，请稍等..</div>
              <div class="add-thank-fee" @click="addThanksFee">添加感谢费</div>
            </div>
            <div class="column lower">
              <div class="allot-info">
                <div class="time-info row">
                  <div class="time-string text-ellipsis">{{fixedOrderInfo.timeInfo.text}}</div>
                  <div class="number-info">{{fixedOrderInfo.numberInfo.text}}</div>
                </div>
                <div class="row place-info-box">
                  <div class="place-info row">
                    <svg fill="#3F88EB" width="12" height="12">
                      <circle cx="6" cy="6" r="3" />
                    </svg>
                    <div class="place-info-string text-ellipsis">{{fixedOrderInfo.startInfo.shortName}}</div>
                  </div>
                  <md-icon name="jiantou_icon" class="arrow-icon"></md-icon>
                  <div class="place-info row">
                    <svg fill="#FF6917" width="12" height="12">
                      <circle cx="6" cy="6" r="3" />
                    </svg>
                    <div class="place-info-string text-ellipsis">{{fixedOrderInfo.endInfo.shortName}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </expansion-panel>
      <md-scroll-view
        class="scroll_view"
        ref="scrollView"
        @refreshing="$_onRefresh"
        :auto-reflow="true"
        :scrolling-x="false"
      >
        <md-scroll-view-refresh
          slot="refresh"
          slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
          :scroll-top="scrollTop"
          :is-refreshing="isRefreshing"
          :is-refresh-active="isRefreshActive"
        ></md-scroll-view-refresh>
        <waiting-lobby-item v-for="(item,index) in lobbyInfo" :key="index" :value="item" @detail="onDetail"></waiting-lobby-item>
      </md-scroll-view>
    </div>
    <md-dialog
      title="取消订单"
      icon="circle-alert"
      v-model="cancelDialog.open"
      :btns="cancelDialog.btns"
    >顺路车主可能还没看到您的订单，临近出发时间更容易被接单</md-dialog>
  </div>
</template>
<script>
import '@/assets/svgs/jiantou_icon.svg';
import { Icon, Button, ScrollView, ScrollViewRefresh, Dialog } from 'mand-mobile';
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions, mapGetters, mapMutations } = createNamespacedHelpers('hitchhike');
import TopBar from '@/components/TopBar';
import WaitingLobbyItem from './WaitingLobbyItem';
import ExpansionPanel from './components/ExpansionPanel';
import Popup from './popup';
export default {
  name: 'waiting-lobby',
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [Dialog.name]: Dialog,
    ExpansionPanel,
    TopBar,
    WaitingLobbyItem
  },
  data() {
    return {
      cancelDialog: {
        open: false,
        btns: [
          {
            text: '确认取消',
            handler: this.cancelOrderHandler
          },
          {
            text: '再等等'
          }
        ]
      }
    };
  },
  async created() {
    if (this.orderInfo) {
      await this.getLobbyInfo(this.orderInfo.orderNo);
    } else {
      if (this.$route.query.orderno) {
        await this.getOrderById(this.$route.query.orderno);
        await this.getLobbyInfo(this.orderInfo.orderNo);
      } else {
        this.$router.replace({ name: 'HitchOrderForm' });
      }
    }
  },
  methods: {
    ...mapActions([
      'getLobbyInfo',
      'cancelOrder',
      'getOrderById',
      'sendOrderInvitation',
      'updateRedMoney'
    ]),
    showCancelDialog() {
      this.cancelDialog.open = true;
    },
    async cancelOrderHandler() {
      this.cancelDialog.open = false;
      try {
        await this.cancelOrder(this.orderInfo.orderNo);
      } catch (error) {
        console.log(error);
        return;
      }
      this.$router.replace({
        name: 'hitchOrderDetail',
        query: {
          orderno: this.orderInfo.orderNo
        }
      });
    },
    async $_onRefresh() {
      await this.getLobbyInfo(this.orderInfo.orderNo);
      this.$refs.scrollView.finishRefresh();
    },
    // async onInvite(item) {
    //   let params = {
    //     orderNo: this.orderInfo.orderNo,
    //     allotId: item.allotId
    //   };
    //   try {
    //     let result = await this.sendOrderInvitation(params);
    //     // TODO 邀请司机接单后续操作
    //   } catch (error) {
    //     console.log(error);
    //   }
    // },
    onDetail(item) {
      this.$router.push({
        name: 'HitchInvitationOrder',
        query: {
          allotid: item.allotId,
          orderno: this.orderInfo.orderNo
        }
      });
    },
    async addThanksFee() {
      try {
        let reward = await Popup.selectReward();
        console.log(reward);
        await this.updateRedMoney({
          orderNo: this.orderInfo.orderNo,
          redMoney: reward.toString()
        });
        await this.getOrderById(this.$route.query.orderno);
      } catch (reason) {
        console.log(reason);
        // do nothing
      }
    }
  },
  computed: {
    ...mapGetters(['orderInfo', 'lobbyInfo', 'fixedOrderInfo'])
  }
};
</script>
<style lang="stylus" scoped>
.cancel_text {
  color: #666666;
  font-size: 26px;
}

#waiting_lobby {
  padding: 20px;
  height: calc(100vh - 128px);
  background-color: color-primary-background;

  .add-thank-fee {
    color: #666666;
    font-size: 20px;
    width: 120px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid rgba(224, 224, 224, 1);
    text-align: center;
  }

  .info-panel-open {
    justify-content: center;
    color: #666666;
    font-weight: 400;

    .hint {
      font-size: 22px;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
    }

    .allot-info {
      font-size: 24px;

      .time-info {
        margin-bottom: 20px;
        align-items: center;

        .time-string {
          line-height: 24px;
          max-width: 10em;
        }

        .number-info {
          margin-left: 10px;
          border-radius: 6px;
          border: 1px solid rgba(224, 224, 224, 1);
          font-size: 20px;
          color: rgba(102, 102, 102, 1);
          text-align: center;
          padding: 0px 10px;
          line-height: 24px;
          height: 24px;
        }
      }

      .place-info {
        align-items: center;
        margin-bottom: 20px;

        .place-info-string {
          margin-left: 20px;
          line-height: 24px;
          width: 16em;
        }
      }
    }

    .price-info {
      justify-content: center;
      align-items: center;

      .price-symbol {
        font-size: 28px;
        font-weight: 400;
      }

      .price-string {
        font-size: 44px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }

      .price-desc-icon {
        width: 28px;
        height: 28px;
        color: #D4D4D4;
        margin-left: 10px;
      }

      .price-desc {
        margin-top: 10px;
        font-size: 20px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 20px;
      }
    }

    .lower {
      margin-top: 20px;
    }

    margin-bottom: 20px;
  }

  .info-panel-close {
    margin-bottom: 20px;
    justify-content: center;
    color: #666666;
    font-weight: 400;

    .hint {
      font-size: 22px;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
    }

    .lower {
      .allot-info {
        font-size: 24px;

        .place-info-box {
          align-items: center;

          .arrow-icon {
            margin: 0px 10px;
          }
        }

        .time-info {
          margin-bottom: 20px;
          align-items: center;

          .time-string {
            line-height: 24px;
          }

          .number-info {
            margin-left: 10px;
            border-radius: 6px;
            border: 1px solid rgba(224, 224, 224, 1);
            font-size: 20px;
            color: rgba(102, 102, 102, 1);
            text-align: center;
            padding: 0px 10px;
            line-height: 24px;
            height: 24px;
          }
        }

        .place-info {
          align-items: center;

          .place-info-string {
            margin-left: 20px;
            line-height: 24px;
            max-width: 12em;
          }
        }
      }

      margin-top: 20px;
    }
  }

  .current_order {
    background-color: #fff;
    height: 256px;
    border-radius: 10px;
  }

  .scroll_view {
    background-color: transparent;
    margin-top: 20px;
    height: calc(100vh - 128px - 256px);
  }
}
</style>
